import React from 'react'
import { Outlet } from 'react-router-dom'
import { Layout } from 'antd'
import { HTML5Backend } from 'react-dnd-html5-backend'
import { DndProvider } from 'react-dnd'

import MyHeader from './header'
import MyLeftSide from './leftside';
import MyRightSide from './rightside'
import './frame.less'

const { Content } = Layout

interface IProps {
  menus?: any,
  children?: any
}

export default function Frame (props: IProps) {
  return (
    <Layout style={{ height: '100vh' }}>
      {/* 页头 */}
      <MyHeader menus={ props.menus } />
      <DndProvider backend={HTML5Backend}>
        <Layout>
          {/* 左侧导航 */}
          <MyLeftSide />

          {/* 主内容 */}
          <Layout style={{ overflowY: 'auto' }}>
            <Content style={{ background: '#fff', margin: 0 }} >
              <Outlet />
              {props.children}
            </Content>
          </Layout>

          <MyRightSide />
        </Layout>
      </DndProvider>
    </Layout>
  )
}
